<template>

  <div id="index">

      <nav class="nav">
        <div class="top-header">
            <router-link to="/"><span class="f-left" >《返回</span></router-link>
            <span class="center">传智健康</span>
            <span class="f-right"><i class="icon-more"></i></span>
        </div>
      </nav>

    <div class="fixed"></div>
    <div class="top">
      <div class="left">
        <i class="el-icon-eleme"></i>
      </div>
      <div class="center">
        <div class="icon">
          <i class="el-icon-search"></i>
        </div>
        <input placeholder="请输入你要搜索的关键字" type="text" />
      </div>
      <div class="right">
        <i class="el-icon-setting"></i>
      </div>
    </div>
    <div>
      
    </div>
    <div class="LunBo">
      <img  alt="" />
    </div>
    <div class="option">
      <div @click="tto(item.url)" :key="item.name" v-for="(item, index) in data" class="tion">
        <div class="div" >
          <div class="top" >
            <div :key="item.name" :style="backgroundList[index]" class="back" >
              <i :class="item.Icon"></i>
            </div>
          </div>
          <div class="bottom" >{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="menu">
      <div class="me">
        <div class="icon">
          <i class="el-icon-s-custom"></i>
        </div>
        <div class="text" id="logo">{{user.username}}</div>
      </div>
      <div class="me">
        <div class="icon">
          <i class="el-icon-s-custom"></i>
        </div>
        <div class="text">主页</div>
      </div>
      <div class="me">
        <div class="icon">
          <i class="el-icon-s-custom"></i>
        </div>
        <div class="text">主页</div>
      </div>
      <div class="me">
        <div class="icon">
          <i class="el-icon-s-custom"></i>
        </div>
        <div class="text">主页</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data: () => {
    return {
      backgroundList: [
        "background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);",
        "background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);",
        "background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);",
        "background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);",
        "background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);",
        "background-image: linear-gradient(-225deg, #FFE29F 0%, #FFA99F 48%, #FF719A 100%);",
        "background-image: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%);",
      ],
      data:[
        {
          Icon: "el-icon-picture",
          name: "预约挂号",
          url:"/asetmeals" 
        },
        {
          Icon: "el-icon-question",
          name: "报告查询",
          url:"/loginview"
        },
        {
          Icon: "el-icon-camera-solid",
          name: "名医义诊",
          url:"/about"
        },
        {
          Icon: "el-icon-warning",
          name: "疾病查询",
          url:"/about"
        },
        {
          Icon: "el-icon-circle-plus",
          name: "健康评估",
          url:"/jkpg"
        },
        {
          Icon: "el-icon-success",
          name: "健康干预",
          url:"/Healthjkgy"
        },
        {
          Icon: "el-icon-success",
          name: "健康档案",
          url:"/HealtheD"
        },
        {
          Icon: "el-icon-success",
          name: "健康咨询",
          url:"/HealthZix"
        },
      ],
      user:{
        username:"",
        pwd:""
      }
    };
  },
   methods:{
        tto(i){
             window.location=i

        },
        loo(){
          

        }
      },
      created(){
       if(sessionStorage.getItem("user")==null||sessionStorage.getItem("pwd")==null){
         this.loo();
       }else{
           this.user.username="用户"+sessionStorage.getItem("user");
       }
      console.log(sessionStorage.getItem("user")+"账号是")
      this.$store.commit("getUsers");
  }
};
</script>

<style>
* {
  margin: 0px;
  padding: 0px;
}
.top {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top .left {
  width: 50px;
  height: 60px;

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #fff;
}
.top .center {
  width: calc(100% - 100px);
  height: 35px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 30px;
}
.top .center div {
  width: 60px;
  height: 35px;

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #cacac9;
}
.top .center input {
  width: calc(100% - 30px);
  height: 32px;
  border: 0px;
  outline: 0px;

  font-size: 20px;
  border-radius: 30px;
  color: #333;
}
.top .center input::placeholder {
  font-size: 14px;
  color: #acacb1;
}

.top .right {
  width: 50px;
  height: 60px;

  display: flex;
  justify-content: center;
  font-size: 20px;
  color: #fff;

  align-items: center;
}
.fixed {
  width: 700px;
  height: 400px;
  background: #86bff8;
  position: fixed;
  top: -250px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  z-index: -1;
}
.LunBo {
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.LunBo img {
  width: 90%;
  height: 90%;
  border-radius: 20px;
}
.option {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
  flex-wrap: wrap;
}
.option .tion {
  width: 22%;
  height: 70px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
  margin-top: 10px;
}
.option .tion .div {
  height: 80px;
  width: 60px;
}
.option .tion .div .top {
  height: 60px;
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.option .tion .div .top .back {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-image: linear-gradient(
    45deg,
    #ff9a9e 0%,
    #fad0c4 99%,
    #fad0c4 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
}
.option .tion .div .top .back i {
  font-size: 25px;
  color: #fff;
}

.option .tion .div .bottom {
  height: 20px;
  width: 60px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.menu {
  width: 100%;
  height: 60px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.13);
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.menu .me {
  width: 60px;
  height: 50px;
}
.menu .me .icon {
  width: 60px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #949494;
  font-size: 30px;
}
.menu .me .text {
  width: 60px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #949494;
}
</style>